<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天截选课系统</title>
    <link href="assets/css/Icons.css" rel="stylesheet">
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='assets/css/Sans.css' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
    <link rel="stylesheet" href="assets/plugins/element-ui/index.css" />
    <style>
        #page-wrapper{
            margin: 0;
            padding: 0;
            top:0;
            min-height: 100vh !important;
        }
        #context{
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }
        #context form{
            margin-top: 20px;
            line-height: 30px;
        }
        #context .line{
            font-size: 20px;
            margin-bottom: 20px;
        }
        #context .line:before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        #context .line label{
            margin-right: 20px;
            width: 100px;
        }
        .input-message{
            border-radius: 10px;
            padding: 5px;
            border: 3px solid black;
        }
        #context .line .input-message{
            margin-left: 20px;
            width: 300px;
            background: white;
        }
        #context .line .input-message[readonly]{
            border: red 3px solid;
        }
        #context .line a{
            color: black;
            cursor: pointer;
            text-decoration: none;
        }
        #context .line a:hover{
            background: red;
            color: white;
        }
        .block{
            display: inline-block;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                课程信息
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">course-message</a></li>
            </ol>
        </div>
        <div id="context">
            <form>
                <div class="line">
                    <label>课程编号</label>
                    <input class="input-message" name="courseId" v-model="user.courseId" readonly>
                </div>

                <div class="line">
                    <label>课程名称</label>
                    <input class="input-message" name="courseName" v-model="user.courseName">
                </div>

                <div class="line">
                    <label>课程学分</label>
                    <input class="input-message" name="courseName" v-model="user.maxNumber">
                </div>

                <div class="line">
                    <label>开始时间</label>
                    <div class="block">
                        <el-date-picker
                                v-model="user.classTime"
                                type="date"
                                class="input-message"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>


                </div>

                <div class="line">
                    <label>结束时间</label>
                    <div class="block">
                        <el-date-picker
                                v-model="user.endTime"
                                type="date"
                                class="input-message"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="line">
                    <label>课程学分</label>
                    <input class="input-message" name="credits" v-model="user.credits">
                </div>



                <div class="line">
                    <label>主讲老师</label>
                    <select class="input-message" name="classId" v-model="user.mainTeacherId">
                        <option v-for="(item,index) in teacherList" :value="item.teacherId">{{item.teacherName}}</option>
                    </select>
                </div>

                <div class="line">
                    <label>任课老师</label>
                    <div style="min-width:300px;max-width:300px;display: inline-block;margin-left: 20px">
                        <el-tag
                                v-for="(tag,index) in user.teacherList"
                                :key="tag.teacherId"
                                closable
                                :type="tag.type"
                                @close="handleClose(index)"
                                style="margin-right: 5px">
                            {{tag.teacherName}}
                        </el-tag>
                    </div>

                </div>

                <div class="line">
                    <a href="javascript:void(0)" @click="dialogFormVisible = true" style="display: inline-block;width: 150px;margin-left: 0px" class="input-message">添加任课老师</a>
                    <a href="javascript:void(0)" @click="updateCourse(user)" style="display: inline-block;width: 270px;" class="input-message">修改信息</a>
                </div>

                <el-dialog title="添加任课老师" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="教师名称" :label-width="formLabelWidth" style="text-align: center;!important;">
                            <el-input v-model="teacherName" @input="inputChange()" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="教师id" :label-width="formLabelWidth" style="text-align: center;">
                            <el-input v-model="teacherId" @input="inputChange()" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-tag
                                v-for="(tag,index) in teacherCourseList"
                                :key="tag.teacherId"
                                :type="tag.type"
                                @click="addTeacher(tag)"
                                style="margin-right: 5px;margin-bottom: 5px;cursor: pointer">
                            {{tag.teacherName}}
                        </el-tag>
                    </el-form>
                </el-dialog>

            </form>

        </div>
    </div>
</div>
</div>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/plugins/element-ui/index.js"></script>
<script>
    var vm = new Vue({
        el:'#wrapper',
        data(){
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                user:[{
                    "id": "",
                    "courseId": "1",
                    "courseName": "操作系统",
                    "classTime": "2022-09-07T14:11:37",
                    "isDelete": "0",
                    "endTime": "2022-10-07T14:11:37",
                    "number": 0,
                    "maxNumber": 5000,
                    "credits": 2,
                    "time":"",
                    "status": "1",
                    "createTime": "2022-09-07T14:11:37",
                    "createUser": "202200001",
                    "updateTime": "2022-09-07T14:11:37",
                    "updateUser": "202200001",
                    "teacherName": "gg",
                    "teacherList":[]
                }],
                teacherList:[
                    {
                        teacherId:"",
                        courseId:"",
                        teacherName:"aaa"
                    }
                ],
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                teacherCourseList:[],
                teacherId:"",
                teacherName:""
            }
        },
        mounted(){
            this.getTeacherList();
            this.getCourse();
            this.getTeacherByCourseId();
        },
        methods:{
            //添加任课
            addTeacher(tag){
                console.log(tag)
                let $this = this;
                $.ajax({
                    url: "/teacherCourse/add",
                    type: "POST",
                    data:{
                        "teacherId":tag.teacherId,
                        "courseId":$this.user.courseId
                    },
                    async: false,
                    success: function (data) {
                        $this.teacherList = data.data.teacherList;
                        $this.$message.success("添加成功");
                        $this.dialogFormVisible = false;

                        $this.getTeacherByCourseId();
                        $this.getCourse();
                        $this.getTeacherList();
                    },
                    error: function (data) {
                        vm.$message.error("教师信息获取失败！");
                    }
                })
            },
            inputChange(){
              this.getTeacherByCourseId();
            },
            //去掉这个课程的这个老师的任课
            handleClose(index){
                console.log(index)
                // this.user.teacherList.splice(index, 1);
                let $this = this;
                $.ajax({
                    url: "/teacherCourse/delete",
                    type: "DELETE",
                    data:{
                        "teacherId":$this.user.teacherList[index].teacherId,
                        "courseId":$this.user.courseId
                    },
                    async: false,
                    success: function (data) {
                        $this.teacherList = data.data.teacherList;
                        $this.$message.success("删除成功");

                        $this.getTeacherByCourseId();
                        $this.getCourse();
                        $this.getTeacherList();
                    },
                    error: function (data) {
                        vm.$message.error("教师信息获取失败！");
                    }
                })

            },
            //获得课程信息
            getCourse(){
                var url = location.search;
                var courseId = url.substring(url.indexOf("=")+1);
                let $this = this;

                $.ajax({
                    url: "/course/getCourse",
                    type: "GET",
                    data:{"courseId":courseId},
                    dataType:"json",
                    async: false,
                    success: function (data) {
                        var date = new Date(data.data.course.classTime);
                        $this.user = data.data.course;
                        $this.user.classTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();

                        console.log($this.user.classTime);
                        date = new Date(data.data.course.endTime);
                        $this.user.endTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                        console.log($this.user.endTime)
                        //vm.tName = data.data.course.teacherName;
                    },
                    error: function (data) {
                        vm.$message.error(data.message);
                    }
                })
            },
            //获取所有老师
            getTeacherList(){
                let $this = this;
                $.ajax({
                    url: "/teacher/getAllTeacherName",
                    type: "GET",
                    async: false,
                    success: function (data) {
                        $this.teacherList = data.data.teacherList;
                    },
                    error: function (data) {
                        vm.$message.error("教师信息获取失败！");
                    }
                })
            },
            //获取不是这个课程的任课老师
            getTeacherByCourseId(){
                let $this = this;
                var url = location.search;
                var courseId = url.substring(url.indexOf("=")+1);
                $.ajax({
                    url: "/teacher/getTeacherByCourseId",
                    type: "GET",
                    data:{
                        "courseId":courseId,
                        "teacherId":$this.teacherId,
                        "teacherName":$this.teacherName
                    },
                    async: false,
                    success: function (data) {
                        $this.teacherCourseList = data.data.teacherList;
                    },
                    error: function (data) {
                        vm.$message.error("未授课教师信息获取失败！");
                    }
                })
            },
            //修改课程信息
            updateCourse(courseDTO){
                $.ajax({
                    url: "/course/update",
                    type: "post",
                    contentType:"application/json",
                    data:JSON.stringify(courseDTO),
                    dataType:"json",
                    async: true,
                    success: function (data) {
                        vm.$message.success(data.message);
                        history.back();
                    },
                    error: function (data) {
                        vm.$message.error(data.message);
                        console.log(data.message);
                    }
                })
            }
        }
    })
</script>

</body>

</html>